<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端JS基础webAPI案例整合</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="head">
        <div class="headbg">
            <div class="bg tpyf">
                <img src="./images/desktop_1.jpg" alt="">
            </div>
            <div class="bg">
                <img src="./images/desktop_2.jpg" alt="">
            </div>
            <div class="bg">
                <img src="./images/desktop_3.jpg" alt="">
            </div>
            <div class="bg">
                <img src="./images/desktop_4.jpg" alt="">
            </div>
            <div class="bg">
                <img src="./images/desktop_5.jpg" alt="">
            </div>
        </div>
        <div class="case_nav">
            <div class="case">
                <fieldset class="df">
                    <legend>第一章课堂案例</legend>
                    <ol>
                        <li><a href="./case/按钮排它.html" target="_blank">按钮排它</a></li>
                        <li><a href="./case/打开网页随机显示图片.html" target="_blank">打开网页随机显示图片</a></li>
                        <li><a href="./case/定时器轮播图.html" target="_blank">定时器轮播图</a></li>
                        <li><a href="./case/网页时钟.html" target="_blank">网页时钟</a></li>
                        <li><a href="./case/同意注册协议.html" target="_blank">同意注册协议</a></li>
                        <li><a href="./case/全选案例.html" target="_blank">复选框全选案例</a></li>
                    </ol>
                </fieldset>
            </div>
            <div class="case">
                <fieldset class="df">
                    <legend>第二章课堂案例</legend>
                    <ol>
                        <li><a href="./case/网页计时.html" target="_blank">当前时间网页时钟</a></li>
                        <li><a href="./case/焦点图.html" target="_blank">焦点图</a></li>
                        <li><a href="./case/广告自动关闭.html" target="_blank">广告自动关闭</a></li>
                        <li><a>点击关闭盒子案例</a></li>
                        <li><a href="./case/随机点名.html" target="_blank">随机点名案例简易版</a></li>
                        <li><a href="./case/小米搜索框.html" target="_blank">小米搜索框</a></li>
                    </ol>
                </fieldset>
            </div>
            <div class="case">
                <fieldset class="df">
                    <legend>第三章课堂案例</legend>
                    <ol>
                        <li><a href="./case/按钮排它.html" target="_blank">按钮排它效果</a></li>
                        <li><a href="./case/Tab栏切换.html" target="_blank">Tabl栏切换案例</a></li>
                        <li><a href="./case/事件委托-Tab栏.html" target="_blank">事件委托-Tab栏</a></li>
                        <li><a href="./case/点击按钮随时显示1张图片.html" target="_blank">点击按钮随机显示图片</a></li>
                        <li><a href="./case/密码隐藏与显示.html" target="_blank">防京东显示与隐藏密码</a></li>
                        <li><a href="./case/手风琴.html" target="_blank">手风琴案例</a></li>
                    </ol>
                </fieldset>
            </div>
            <div class="case">
                <fieldset class="df">
                    <legend>第四章课堂案例</legend>
                    <ol>
                        <li><a href="./case/验证码计时器.html" target="_blank">验证码倒计时</a></li>
                        <li><a href="./case/购物车加减操作.html" target="_blank">购物车加减操作</a></li>
                        <li><a href="./case/广告自动关闭.html" target="_blank">10秒后自动关闭广告</a></li>
                        <li><a href="./index.html" target="_blank">页面换肤</a></li>
                        <li><a href="./case/开关灯.html" target="_blank">开关灯案例</a></li>
                        <li><a href="./index.html" target="_blank">图片切换案例</a></li>
                    </ol>
                </fieldset>
            </div>
            <div class="case">
                <fieldset class="df">
                    <legend>第五章课堂案例</legend>
                    <ol>
                        <li><a href="./case/下课倒计时.html" target="_blank">下课倒计时</a></li>
                        <li><a href="./case/完整轮播图.html" target="_blank">完整轮播图</a></li>
                        <li><a href="./case/学生信息表案例.html" target="_blank">学生信息表案例</a></li>
                        <li><a href="./case/B站发布评论.html" target="_blank">B站发布评论案例</a></li>
                        <li><a href="./case/仿新浪固定头部.html" target="_blank">仿新浪头部固定</a></li>
                        <li><a href="./case/表行随机变色.html" target="_blank">表行随机变色</a></li>
                    </ol>
                </fieldset>
            </div>
            <div class="case">
                <fieldset class="df">
                    <legend>WebAPI综合实战</legend>
                    <ol>
                        <li><a href="./case/捐赠管理.html" target="_blank">捐赠管理实战</a></li>
                        <li><a href="./case/打地鼠案例.html" target="_blank">打地鼠实战</a></li>
                        <li><a href="./case/待办列表.html" target="_blank">待办列表实战</a></li>
                        <li><a href="./case/点名系统.html" target="_blank">点名系统实战</a></li>
                        <li><a href="./case/register.html" target="_blank">小兔鲜儿注册页面验证</a></li>
                        <li><a href="./case/班级点名优化.html" target="_blank">班级点名系统优化</a></li>
                    </ol>
                </fieldset>
            </div>
            <div class="case lastD">
                <fieldset class="df">
                    <legend>课外拓展案例</legend>
                    <ol>
                        <li><a href="./case/js计算器.html" target="_blank">简易计算器</a></li>
                        <li><a href="./case/手绘签名.html" target="_blank">手绘签名</a></li>
                        <li><a href="./case/仿新浪固定头部.html" target="_blank">仿新浪头部</a></li>
                        <li><a href="./case/简易换肤案例.html" target="_blank">简易换肤案例</a></li>
                        <li><a href="./case/学员信息-搜索.html" target="_blank">学员信息+搜索</a></li>
                        <li><a href="./case/表单重置.html" target="_blank">表单重置案例</a></li>
                    </ol>
                </fieldset>
            </div>
            <div class="case">
                <fieldset class="df">
                    <legend>JS进阶案例</legend>
                    <ol>
                        <li><a href="./case/面向对象封装消息提示.html" target="_blank">面向对象封装消息提示</a></li>
                        <li><a href="./case/商品结算-对象解构和数组的操作.html" target="_blank">商品结算-对象解构数组</a></li>
                        <li><a href="./case/英雄列表-增删改查.html" target="_blank">英雄列表-增删改查</a></li>
                        <li><a href="./case/debounce小案例.html" target="_blank">debounce小案例</a></li>
                        <li><a href="./case/记录播放位置-节流案例.html" target="_blank">记录播放位置-节流案例</a></li>
                        <li><a href="./case/axios书籍管理-增删改查.html" target="_blank">axios书籍管理-增删改查</a></li>
                    </ol>
                </fieldset>
            </div>
            <div class="case">
                <fieldset class="df">
                    <legend>网页布局案例</legend>
                    <ol>
                        <li><a>小兔鲜儿案例</a></li>
                        <li><a>传智播客官网案例</a></li>
                        <li><a>小米商城官网案例</a></li>
                        <li><a>花匠网站案例</a></li>
                        <li><a>王者荣耀网站案例</a></li>
                        <li><a>学成在线案例</a></li>
                    </ol>
                </fieldset>
            </div>
            <div class="case last_case">
                <fieldset class="df">
                    <legend>课堂案例优化</legend>
                    <ol>
                        <li><a href="./case/网页时钟.html" target="_blank">当前时间网页时钟</a></li>
                        <li><a href="./case/待办列表.html" target="_blank">待办列表实战</a></li>
                        <li><a href="./case/product-dev.html" target="_blank">小兔鲜商品详情放大镜</a></li>
                        <li><a href="./case/index.html" target="_blank">小兔鲜儿首页</a></li>
                        <li><a href="./case/register.html" target="_blank">小兔鲜儿注册页面验证</a></li>
                        <li><a href="./case/login.html" target="_blank">小兔鲜儿登录页面验证</a></li>
                    </ol>
                </fieldset>
            </div>
        </div>
        <!-- 添加数据区域 -->
        <div class="case_nav addCases">

        </div>
    </div>

    <!-- 添加元素区域 -->
    <form action="">
        <div class="add">

            <h4>请输入对应的信息</h4>
            <div>
                标题：<input type="text" class="title">
            </div>

            <div>
                内容1:<input type="text" data-id="0" class="contentA">
            </div>
            <div>
                内容2:<input type="text" data-id="1" class="contentB">
            </div>
            <div>
                内容3:<input type="text" data-id="2" class="contentC">
            </div>
            <div>
                内容4:<input type="text" data-id="3" class="contentD">
            </div>
            <div>
                内容5:<input type="text" data-id="4" class="contentE">
            </div>
            <div>
                内容6:<input type="text" data-id="5" class="contentF">
            </div>
            <div class="add_btn">
                <button class="conf_add">确认添加</button>
                <button class="reslut" type="reset">重新填写</button>
                <button class="close">取消添加</button>
            </div>
        </div>
    </form>

    <!-- 添加按钮跟回到顶部按钮 -->
    <div class="nav">
        <div class="nav_add">添加数据</div>
        <div class="nav_top">回到顶部</div>
    </div>


    <!-- 花里胡哨的东西 -->
    <div class="bubble">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="bubble">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="bubble">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="bubble yw">前端87期WebAPI案例
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="bubble">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <!-- 花里胡哨的东西 -->

    <!-- 引入js -->
    <script src="./js/index.js"></script>

</body>

</html>